<template>
	<div>
		<h1>登录账号</h1>
		
		<p>虾米 - 严选商城欢迎你</p>
		
		<van-form>
		  <van-field
		    v-model="username"
		    name="用户名"
		    label="用户名"
		    placeholder="用户名"
		    :rules="[{ required: true, message: '请填写用户名' },{pattern : /^1[3456789]\d{9}$/,message:'请输入正确的手机号'}]"
		  />
		  <van-field
		    v-model="password"
		    type="password"
		    name="密码"
		    label="密码"
		    placeholder="密码"
		    :rules="[{ required: true, message: '请填写密码' },{pattern : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,message:'请输入正确的密码'}]"
		  />
		  <div style="margin: 16px;" @click="add">
		    <van-button round block type="info" native-type="submit">
		      提交
		    </van-button>
		  </div>
		</van-form>
		
		<h3 @click="zhuce">注册</h3>
	</div>
</template>

<script>
	import userUtiils from '../utils/userUtils'
	export default {
		data(){
			return {
				username : '',
				password : ''
			}
		},
		mounted() {
			userUtiils.setToken()
		},
		methods:{
			zhuce(){
				this.$router.push({
					path:'/zhuce'
				})
			},
			add(){
				if(!this.username.match(/^1[3456789]\d{9}$/)){
					return
				}
				if(!this.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/)){
					return
				}
				localStorage.username = this.username
				
				this.$router.push({
					path:'user'
				})
			}
		}
	}
</script>

<style scoped>
	
</style>
